<template> 
    <div class="refund-order-container">
        <!-- 导航栏组件 -->
        <TmallNavBar>
            <template #left><i class="icon iconfont icon-zuojiantou" @click.stop="$router.push({path: '/me'})"></i></template>
            <template #default>退款/退货</template>
            <template #right><i class="icon iconfont icon-shouye1" @click="$router.push({path: '/'})"></i></template>
        </TmallNavBar>

        <!-- 订单数据 -->
        <div class="order-list">
            <van-tabs 
                v-model:active="currentTab" 
                animated 
                @click-tab="onClickTab"
            >
                <van-tab 
                    v-for="(item,index) in orderTabs"
                    :title="item.title"
                    :name="item.status"
                    :key="index"
                >
                    <van-list
                        v-model:loading="loading"
                        :finished="finished"
                        :finished-text="params.page_size < total ? '我也是有底线的~' : ''"
                        @load="onLoadMore"
                    >

                        <!-- 骨架屏 -->
                        <van-skeleton v-if="isShowSkeleton">
                            <template #template>
                                <div class="ols-skeleton">
                                    <div class="ols-skeleton-item" v-for="(item) in skeletonLength" :key="item">
                                        <div class="ols-title-box">
                                            <van-skeleton-paragraph class="ols-title" row-width="45%"/>
                                            <van-skeleton-paragraph class="ols-title" row-width="20%"/>
                                        </div>

                                        <div class="ols-body-box">
                                            <van-skeleton-image />
                                            <div class="ols-body-item">
                                                <van-skeleton-paragraph class="ols-body-text" v-for="(item) in 3" :key="item"/>
                                            </div>
                                        </div>

                                        <div class="ols-price-box">
                                            <van-skeleton-paragraph class="ols-price-total" row-width="20%"/>
                                            <van-skeleton-paragraph class="ols-price" row-width="25%"/>
                                        </div>

                                        <van-skeleton-paragraph style="height: 1px;"/>

                                        <div class="ols-footer-box">
                                            <van-skeleton-paragraph class="ols-footer-item" row-width="30%"/>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </van-skeleton>
                        <div v-else>
                            <!-- 订单数据 -->
                            <div class="orders" ref="orderListRef" v-if="orderList.length > 0">
                                <div class="card" v-for="item in orderListComputed" :key="item.oid">
                                    <!-- 订单信息 -->
                                    <div class="status">
                                        <span class="date">{{ item.create_time }}</span>
                                        <!-- 订单状态文字 -->
                                        <template v-for="(orderStatusItem, index) in orderStatusItems" :key="index">
                                            <span v-if="item.status == orderStatusItem.value">
                                                <van-tag :color="orderStatusItem.color" mark type="primary" size="medium">{{ orderStatusItem.value_txt }}</van-tag>
                                            </span>
                                        </template>
                                    </div>


                                    <!-- 商品信息，点击商品跳转到订单详情，不是商品详情 -->
                                    <div class="goods"
                                        v-for="orderItem in item.orderItems" :key="orderItem.id"
                                        @click="$router.push('/orderDetail?oid='+orderItem.oid+'&from=refundOrder')"
                                    >
                                        <div class="cover">
                                            <van-image :src="global.MINIO_FILE_DOMAIN + orderItem.goods_cover_url" />
                                        </div>

                                        <div class="meta">
                                            <div class="name ellipsis">{{ orderItem.goods_name }}</div>
                                            <div class="type">{{ orderItem.goods_sku_text }}</div>
                                        </div>
                                    </div>


                                    <!-- 退款信息 -->
                                    <div class="payment">
                                        <span style="color: #444;">退款：</span>
                                        <div class="amount">
                                            <span class="symbol">¥</span>
                                            <span class="money"> {{ (item.pay_money/100).toFixed(2) }}</span>
                                        </div>
                                    </div>

                                    <!-- 订单操作按钮 -->
                                    <div class="action">
                                        <!-- 待付款状态：显示去支付按钮 -->
                                        <template v-if="item.status == 0">
                                            <div @click="showCancelOrder(item.oid)" class="button">取消订单</div>
                                            <div @click="handleOrderPay(item.oid)" class="button primary">去支付</div>
                                        </template>
                                        <template v-else>
                                            <!-- 待评价/已完成/已取消 状态: 展示删除订单按钮 -->
                                            <div 
                                                v-if="[8, -2].includes(item.status)"
                                                class="button delete"
                                                @click="handleDeleteOrder(item.oid)"
                                            >删除订单</div>

                                            <div class="button secondary"
                                                @click="$router.push('/goodsDetail?goods_id=' + item.orderItems[0].goods_id)"
                                            >再次购买</div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                            <!-- 空状态 -->
                            <div class="blank" v-else>
                                <van-image :src="blankImage" class="image" />
                                <span class="text">您还没有订单哟</span>
                                <van-button class="button" to="/">去首页看看</van-button>
                            </div>
                        </div>
                    </van-list>
                </van-tab>
            </van-tabs>
        </div>

        <!-- 返回顶部组件 -->
        <van-back-top right="5vw" bottom="5vh" />
    </div>
</template>

<script setup>
import { reqOrderListAPI, reqDeleteOrderAPI } from '@/apis/order'
import { reactive, ref, inject, onMounted, computed } from 'vue'
import blankImage from '@/assets/images/blank.png'
import { showConfirmDialog, showSuccessToast } from 'vant';


// -------------------------- 定义全局属性开始 --------------------------
// 全局属性
const global = inject('global')

// 当前tab
const currentTab = ref(0)

const orderListRef = ref()

// tabs 数据
const orderTabs = ref([
  { status: 5, title: '全部' },
  { status: 9, title: '退款中' },
  { status: 10, title: '已退款' }
])
// -------------------------- 定义全局属性结束 --------------------------

onMounted(() => {
    currentTab.value = 5
    console.log('onMounted currentTab.value =', currentTab.value);
    isMounted.value = true

})




// -------------------------- 切换订单状态开始 --------------------------
const onClickTab = async (e) => {
    params.status = e.name
    finished.value = false
    isShowSkeleton.value = true
    params.page = 1
    orderList.value = []
    total.value = 0

    await getOrderList()

    isShowSkeleton.value = false
}
// -------------------------- 切换订单状态结束 --------------------------



// -------------------------- 加载更多订单开始 --------------------------
// 是否显示骨架屏
const isShowSkeleton = ref(false)

// 是否挂载
const isMounted = ref(false)

const onLoadMore = async () => {
    // 当挂载时显示骨架屏
    if (isMounted.value) {
        isShowSkeleton.value = true
    }

	await getOrderList()
    isMounted.value = false
    isShowSkeleton.value = false
}
// -------------------------- 加载更多订单结束 --------------------------




// -------------------------- 获取订单数据开始 --------------------------
const orderListComputed = computed(() => {
    // 待付款栏时需要过滤，取消订单时能实时更新数据
    if (currentTab == 1) {
        return orderList.value.filter((item) => item.status == 0)
    } else if (currentTab == 3) {
        return orderList.value.filter((item) => [3,4,5].includes(item.status))
    }

    return orderList.value
})
// 骨架屏
const skeletonLength = ref(8)

// 完成
const finished = ref(false)

// 加载中
const loading = ref(false)

// 订单状态
const orderStatusItems = ref([])

// 订单列表
const orderList = ref([])

// 订单数量
const total = ref(0)

// 订单列表请求参数
const params = reactive({
  status: "5",
  is_delete: '0',
  page: 1,
  page_size: 10
})


const getOrderList = async () => {
  if (finished.value == true) {
    return
  }

  loading.value = true
  params.status = currentTab.value
  const result = await reqOrderListAPI(params)
  let orders = result.data.orders != null ? result.data.orders : []
  total.value = result.data.total

//   组装订单状态数据
  orderStatusItems.value = []
  result.data.status_items.forEach(item => {
    let color = ''
    if (item.value == 0) {
        color = '#FF4339'
    } else if (item.value == 1) {
        color = '#27BA9B'
    } else if ([-1,-2,-3,-5].includes(item.value)) {
        color = '#BBBBBB'
    } else if ([6,7].includes(item.value)) {
        color = '#FF976A'
    } else if ([8].includes(item.value)) {
        color = '#ff9240'
    } else if ([3,4,5].includes(item.value)) {
        color = '#07C160'
    }
    item.color = color
    orderStatusItems.value.push(item)
  })

  orderList.value.push(...orders)
  if (params.page < result.data.page_total) {
    params.page++
  } else {
    finished.value = true
  }

  loading.value = false
}
// -------------------------- 获取订单数据结束 --------------------------



// -------------------------- 删除订单功能开始 --------------------------
const handleDeleteOrder = async (oid) => {
    showConfirmDialog({
        title:'提示',
        message:'删除的订单可以在电脑端查看!'
    }).then(async () => {
        await reqDeleteOrderAPI(oid)

        showSuccessToast('删除成功')

        const index = orderList.value.findIndex((item) => item.oid == oid)
        orderList.value.splice(index, 1)
    }).catch(() => {})
}
// -------------------------- 删除订单功能结束 --------------------------
</script>

<style scoped lang="scss">
.ols-skeleton {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 51px;
    .ols-skeleton-item {
        margin-bottom: 40px;
        .ols-title-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            .ols-title {
                height: 30px;
            }
        }
        .ols-price-box {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 5px;
            .ols-price-total {
                margin-right: 15px;
                height: 20px;
            }
            .ols-price {
                height: 30px;
            }
        }
        .ols-body-box {
            display: flex;
            .ols-body-item {
                flex: 1;
                margin-left: 10px;
                .ols-body-text {
                    margin-top: 10px;
                }
            }
        }
        .ols-footer-box {
            display: flex;
            justify-content: flex-end;
            margin-top: 7px;
            .ols-footer-item {
                height: 30px;
            }
        }
    }
}
.refund-order-container {
    .order-list {
        margin-top: 45px;
        .orders {
            display: flex;
            flex-direction: column;
            margin-top: 45px;
            overflow-y: auto;
            .card {
                min-height: 50px;
                padding: 10px;
                margin: 10px 10px 0;
                border-radius: 5px;
                background-color: #fff;

                &:last-child {
                    padding-bottom: 20px;
                }

                .status {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 15px;
                    color: #999;
                    margin-bottom: 8px;

                    .date {
                        color: #666;
                        flex: 1;
                    }

                    .primary {
                        color: #ff9240;
                    }

                    .icon-delete {
                        line-height: 1;
                        margin-left: 5px;
                        padding-left: 5px;
                        border-left: 1px solid #e3e3e3;
                    }
                }

                .goods {
                    display: flex;
                    margin-bottom: 10px;

                    .cover {
                        width: 85px;
                        height: 85px;
                        margin-right: 10px;
                        border-radius: 10px;
                        overflow: hidden;
                        position: relative;
                        image,img {
                            width: 85px;
                            height: 85px;
                        }
                    }

                    .quantity {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        line-height: 1;
                        padding: 3px 2px 3px 4px;
                        font-size: 12px;
                        color: #fff;
                        border-radius: 5px 0 0 0;
                        background-color: rgba(0, 0, 0, 0.6);
                    }

                    .meta {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }

                    .name {
                        height: 35px;
                        font-size: 13px;
                        color: #444;
                    }

                    .type {
                        line-height: 1.8;
                        padding: 0 8px;
                        margin-top: 5px;
                        font-size: 12px;
                        align-self: flex-start;
                        border-radius: 2px;
                        color: #888;
                        background-color: #f7f7f8;
                    }

                    .more {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 12px;
                        color: #333;
                    }
                }

                .payment {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    line-height: 1;
                    padding: 10px 0;
                    text-align: right;
                    color: #999;
                    font-size: 14px;
                    border-bottom: 1px solid #eee;

                    .quantity {
                        font-size: 12px;
                        margin-right: 8px;
                    }

                    .amount {
                        color: #444;
                        margin-left: 3px;
                        .money {
                            font-size: 18px;
                            margin-left: 2px;
                        }
                    }

                    .symbol {
                        font-size: 10px;
                    }
                }

                .action {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    padding-top: 10px;

                    .button {
                        width: 90px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-left: 10px;
                        border-radius: 30px;
                        border: 1px solid #ccc;
                        font-size: 13px;
                        color: #444;
                    }

                    .secondary {
                        color: #27ba9b;
                        border-color: #27ba9b;
                    }

                    .primary {
                        color: #fff;
                        background-color: #27ba9b;
                    }

                    .delete {
                        color: red;
                        border-color: red;
                    }

                    .refund {
                        color: #ff9240;
                        border-color: #ff9240;
                    }
                }
            }
        }
        .blank {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 60vh;
            .image {
                width: 200px;
                height: 141px;
            }
            .text {
                color: #444;
                font-size: 13px;
                margin: 10px 0;
            }
            .button {
                width: 120px !important;
                height: 30px;
                line-height: 30px;
                margin-top: 10px;
                font-size: 13px;
                border-radius: 30px;
                color: #fff;
                background-color: #27ba9b;
            }
        }
    }
}


.popup-root {
  padding: 15px 15px 0;
  border-radius: 5px 5px 0 0;
  overflow: hidden;

  .title {
    font-size: 15px;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
  }

  .description {
    font-size: 14px;
    padding: 0 10px;

    .tips {
      color: #444;
      margin-bottom: 6px;
    }

    .cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      color: #666;
    }

    .icon {
      font-size: 19px;
      color: #999;
    }

    .icon-checked {
      font-size: 19px;
      color: #27ba9b;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding: 15px 0 20px;
    font-size: 14px;
    color: #444;

    .button {
      flex: 1;
      height: 36px;
      text-align: center;
      line-height: 36px;
      margin: 0 10px;
      color: #444;
      border-radius: 36px;
      border: 1px solid #ccc;
    }

    .primary {
      color: #fff;
      background-color: #27ba9b;
      border: none;
    }
  }
}
</style>